<template>
  <div class="box">
    <p class="box-title">能源系统运营驾驶舱</p>
    <span class="full" @click="info">全屏</span>
    <div class="top-box">
      <div class="top-title"><h1>当日能源消耗统计</h1></div>
      <div class="box1-charts">
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.8vw;width: 33vw" :option="option8" /></div>
        <div>
          <e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 33vw" :option="option9" />
        </div>
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 28vw" :option="option10" /></div>
      </div>
    </div>
    <div class="m-box">
      <div class="box1-title"><h1>月度能源消耗统计</h1></div>
      <div class="box1-charts">
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.8vw;width: 33vw" :option="option1" /></div>
        <div><e-charts autoresize style="height: 27vh;width: 33vw" :option="option2" /></div>
        <div><e-charts autoresize style="height: 27vh;width: 28vw" :option="option11" /></div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="box2">
        <div class="title1"><span>>></span>单台燃动费</div>
        <div>
          <div><e-charts autoresize style="height: 27vh;margin-left: 0.1vw;margin-top:1vh;width: 23vw" :option="option6" /></div>
        </div>
      </div>
      <div class="box3">
        <div class="box2-title" style="margin-top: 1vh"><h1>年度碳排放统计</h1></div>
        <div><e-charts autoresize style="height: 8vh;margin-left: 0.1vw;width: 22vw" :option="option12" /></div>
        <div class="box2-title" style="margin-top: 1vh"><h1>年度产量统计</h1></div>
        <div><e-charts autoresize style="height: 8vh;margin-left: 0.1vw;width: 22vw" :option="option13" /></div>
      </div>
      <div class="box4">
        <div class="title1"><span>>></span>综合能耗</div>
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.1vw;margin-top:1vh;width: 22.6vw" :option="option7" /></div>
      </div>
      <div class="box5">
        <div class="title1"><span>>></span>月度碳排放</div>
        <div><e-charts autoresize style="height: 27vh;width: 22vw" :option="option3" /></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import screenfull from 'screenfull'
import moment from 'moment'
import API from '@/api/energy/new'
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      dayWaterList: [],
      dayWaterNameList: [],
      dayElectricNameList: [],
      dayElectricList: [],
      dayGasNameList: [],
      monthWaterNameList: [],
      monthElectricNameList: [],
      monthGasNameList: [],
      monthArr: [],
      energyEvenData: [],
      daySolar: 0,
      dayGasList: [200, 100, 100, 100, 100, 100],
      monthWaterList: [200, 100, 100, 100, 100],
      monthElectricList: [200, 100, 100, 100, 100, 100],
      monthGasList: [200, 100, 100, 100, 100, 100],
      electric: 0,
      gas: 0,
      CO2Month: 0,
      CO2Year: 0,
      scaleCO2: 0
    }
  },
  computed: {
    option1() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '水定额',
              '水实际'
            ],
            [
              '工厂',
              '20185',
              this.monthWaterList[1]
            ],
            [
              '冲压车间',
              '251',
              '251'
            ],
            [
              this.monthWaterNameList[3],
              '1177',
              this.monthWaterList[3]
            ],
            [
              this.monthWaterNameList[4],
              '7062',
              this.monthWaterList[4]
            ],
            [
              this.monthWaterNameList[0],
              '648',
              this.monthWaterList[0]
            ],
            [
              this.monthWaterNameList[2],
              '7827',
              this.monthWaterList[2]
            ],
            [
              '绿化',
              '1027',
              '100'
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（t）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' t'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          }
        ]
      }
    },
    option2() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '电定额',
              '电实际'
            ],
            [
              '工厂',
              '3489495',
              this.monthElectricList[1]
            ],
            [
              '冲压车间',
              '85005',
              this.monthElectricList[5]
            ],
            [
              '车身车间',
              '614314',
              this.monthElectricList[2]
            ],
            [
              '涂装车间',
              '1820117',
              this.monthElectricList[4]
            ],
            [
              '总装车间',
              '334109',
              this.monthElectricList[0]
            ],
            [
              '动力中心',
              '331861',
              this.monthElectricList[3]
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（kwh）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          }
        ]
      }
    },
    option3() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '碳排放实际'
            ],
            [
              '工厂',
              this.CO2Month
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（t）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option4() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'product',
              '水',
              '电',
              '天然气'
            ],
            [
              '工厂',
              110,
              100,
              90
            ],
            [
              '冲压车间',
              60,
              100,
              80
            ],
            [
              '车身车间',
              48.11,
              83.89,
              70
            ],
            [
              '涂装车间',
              118.07,
              77.11,
              64.82
            ],
            [
              '总装车间',
              117.14,
              92.86,
              75
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '消耗量',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' t'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' m³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          }
        ]
      }
    },
    option5() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'value',
          splitLine: { show: false }
        },
        yAxis: {
          type: 'category',
          data: ['光伏'],
          splitLine: { show: false },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        legend: {
          right: 1000,
          top: 'center'
        },
        series: [
          {
            name: '当日光伏发电量',
            type: 'bar',
            data: [1888],
            barWidth: 28,
            itemStyle: {
              normal: {
                color: '#affdcf'
              }
            }

          }
        ]
      }
    },
    option6() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              interval: 1,
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            name: '工厂（元/台）',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            }
          },
          {
            type: 'value',
            splitLine: { show: false },
            min: 0,
            max: 0,
            position: 'left',
            offset: 110,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            axisLabel: {
            }
          },
          {
            type: 'value',
            name: '指标（元/台）',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: {
            }
          }
        ],
        series: [
          {
            name: '工厂',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 元/台'
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                },
                label: {
                  show: false,
                  // position: 'middle',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            data: [100, 150, 200, 250, 150, 200, 250, 150, 200, 250, 333, 400]
          },
          {
            name: '指标',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 元/台'
              }
            },
            yAxisIndex: 2,
            itemStyle: {
              color: 'red'
            },
            data: [300, 200, 150, 250, 200, 230, 158, 333, 666, 555, 333, 150]
          }
        ]
      }
    },
    option7() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              interval: 1,
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            data: this.monthArr
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            name: '工厂（tce）',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            }
          },
          {
            type: 'value',
            splitLine: { show: false },
            min: 0,
            max: 0,
            position: 'left',
            offset: 110,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            axisLabel: {
            }
          },
          {
            type: 'value',
            name: '指标（tce）',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: {
            }
          }
        ],
        series: [
          {
            name: '工厂',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' tce'
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                },
                label: {
                  show: false,
                  // position: 'middle',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            data: this.energyEvenData
          },
          {
            name: '指标',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' tce'
              }
            },
            yAxisIndex: 2,
            itemStyle: {
              color: 'red'
            },
            data: [125, 200, 325, 125, 135, 210, 158, 350, 450, 420, 333, 250]
          }
        ]
      }
    },
    option8() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '水实际'
            ],
            [
              '工厂',
              this.dayWaterList[1]
            ],
            [
              '冲压车间',
              100
            ],
            [
              this.dayWaterNameList[3],
              this.dayWaterList[3]
            ],
            [
              this.dayWaterNameList[4],
              this.dayWaterList[4]
            ],
            [
              this.dayWaterNameList[0],
              this.dayWaterList[0]
            ],
            [
              this.dayWaterNameList[2],
              this.dayWaterList[2]
            ],
            [
              '绿化',
              100
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（t）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' t'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option9() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '电实际'
            ],
            [
              '工厂',
              this.dayElectricList[1]
            ],
            [
              this.dayElectricNameList[5],
              this.dayElectricList[5]
            ],
            [
              this.dayElectricNameList[2],
              this.dayElectricList[2]
            ],
            [
              this.dayElectricNameList[4],
              this.dayElectricList[4]
            ],
            [
              this.dayElectricNameList[0],
              this.dayElectricList[0]
            ],
            [
              '动力中心',
              this.dayElectricList[3]
            ],
            [
              '光伏',
              this.daySolar
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（kwh）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option10() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '天然气实际'
            ],
            [
              '工厂',
              this.dayGasList[1]
            ],
            [
              this.dayGasNameList[2],
              this.dayGasList[2]
            ],
            [
              this.dayGasNameList[0],
              this.dayGasList[0]
            ],
            [
              this.dayGasNameList[3],
              this.dayGasList[3]
            ],
            [
              '动力中心',
              this.dayGasList[5]
            ],
            [
              this.dayGasNameList[4],
              this.dayGasList[4]
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（m³）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'm³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option11() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '天然气定额',
              '天然气实际'
            ],
            [
              '工厂',
              '298961',
              this.monthGasList[1]
            ],
            [
              '车身',
              '366',
              this.monthGasList[2]
            ],
            [
              '涂装',
              '239230',
              this.monthGasList[0]
            ],
            [
              '总装',
              '0',
              this.monthGasList[3]
            ],
            [
              '动力中心',
              '49243',
              this.monthGasList[5]
            ],
            [
              '食堂',
              '7778',
              this.monthGasList[4]
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（m³）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'm³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' m³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          }
        ]
      }
    },
    option12() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          right: 'right',
          padding: [1000, 50, 0, 0]
        },
        grid: {
          right: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['']
        },
        series: [
          {
            name: '实际',
            type: 'bar',
            barWidth: '60%',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              // formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
              //   if (params.value) { // 如果当前值存在则拼接
              //     return '实际' + params.value + 't' + '占年度指标' + this.scaleCO2 + '%'
              //   } else { // 否则返回个空
              //     return ''
              //   }
              // },
              formatter: params => { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  console.log(this.scaleCO2)
                  return '实际' + params.value + 't' + '占年度指标' + 31 + '%'
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [10507]
          },
          {
            name: '年度',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '       ' + '年度指标' + params.value + 't'
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [33879]
          }
        ]
      }
    },
    option13() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          right: 'right',
          padding: [1000, 50, 0, 0]
        },
        grid: {
          right: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['']
        },
        series: [
          {
            name: '实际',
            type: 'bar',
            barWidth: '60%',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '实际' + params.value + '台' + `占年度指标36%`
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + '台'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [14820]
          },
          {
            name: '年度',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '       ' + '年度指标' + params.value + '台'
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + '台'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [40635]
          }
        ]
      }
    }
  },
  created() {
    this.login()
  },
  methods: {
    info() {
      screenfull.toggle()
      this.$router.push('/energy/nengyuan')
    },
    login() {
      const data = {
        url: 'http://10.22.97.6:8081/api/sys/login',
        method: 1,
        data: {
          password: 'Gy12345678!',
          username: 'gy_operation'
        }
        // url: 'https://router.ubeiyun.com/api/v1/C'
      }
      API.getList(data).then(res => {
        console.log(data)
        const TokenKey = 'energy-Token'
        this.token = res.result.token
        const energyToken = res.result.token
        Cookies.set(TokenKey, energyToken)
      }).finally(() => {
        this.index()
      })
    },
    index() {
      const startDay = new Date(new Date().toLocaleDateString()).getTime() // 当天0点
      const endDay = (new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)// 当天23:59
      const startTime = moment(startDay).format('YYYY-MM-DD HH:mm:ss')
      const endTime = moment(endDay).format('YYYY-MM-DD HH:mm:ss')
      const monthDate = new Date().getMonth() + 1
      const year = new Date().getFullYear()
      const startMonth = year + '-' + '0' + monthDate + '-01' + ' ' + '00:00:00'
      let endMonth = ''
      if (monthDate === 2) {
        endMonth = year + '-' + '0' + monthDate + '-28' + ' ' + '23:59:00'
      } else if (monthDate === 4 || monthDate === 6 || monthDate === 9) {
        endMonth = year + '-' + '0' + monthDate + '-30' + ' ' + '23:59:00'
      } else if (monthDate === 11) {
        endMonth = year + '-' + monthDate + '-30' + ' ' + '23:59:00'
      } else if (monthDate === 12 || monthDate === 10) {
        endMonth = year + '-' + monthDate + '-31' + ' ' + '23:59:00'
      } else {
        endMonth = year + '-' + '0' + monthDate + '-31' + ' ' + '23:59:00'
      }
      // this.getDayWater(startTime, endTime)
      // this.getDayElectric(startTime, endTime)
      // this.getDayGas(startTime, endTime)
      // this.getMonthGas(startMonth, endMonth)
      // this.getMonthElectric(startMonth, endMonth)
      // this.getMonthWater(startMonth, endMonth)
      // this.getSolar(startTime, endTime)
      // this.getEnergyEven(year, monthDate)
      // this.getCo2(startMonth, endMonth, year)
    },
    getDayWater(startTime, endTime) {
      console.log(this.token)
      const data = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + startTime + '&endDate=' + endTime + '&emodelId=1636565362844717058,1596133880003297281,1596133639350910977,1596132955402534913,1636565586342400001,1596132955402534913&energyId=312060c20a1e02949b3ebe1721d93d92&timeCategory=day',
        method: 0,
        token: this.token
      }
      API.getList(data).then(res => {
        console.log(res)
        const list = res.data
        this.dayWaterList = []
        this.dayWaterNameList = []
        list.forEach(item => {
          this.dayWaterList.push(item.value)
          this.dayWaterNameList.push(item.emodelName)
        })
      })
    },
    getDayElectric(startTime, endTime) {
      console.log('获取电（当日）')
      const data = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + startTime + '&endDate=' + endTime + '&emodelId=1636564579411644417,1636565362844717058,1596133880003297281,1596133639350910977,1636565586342400001,1596132955402534913&energyId=SU035&timeCategory=day',
        method: 11,
        token: this.token
      }
      API.getList(data).then(res => {
        const list = res.data
        this.dayElectricList = []
        list.forEach(item => {
          this.dayElectricList.push(item.value)
          this.dayElectricNameList.push(item.emodelName)
        })
      })
    },
    getSolar(startTime, endTime) {
      const data = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + startTime + '&endDate=' + endTime + '&energyId=8e3edca4d40c6111b3b154807c93b0aa&timeCategory=day',
        method: 0,
        token: this.token
      }
      API.getList(data).then(res => {
        this.daySolar = res.data[0].value
      })
    },
    getDayGas(startTime, endTime) {
      console.log('获取天然气（当日）')
      const data = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + startTime + '&endDate=' + endTime + '&emodelId=1636565362844717058,1596133880003297281,1596133639350910977,1637119161091047425,1643980971563892737,1596132955402534913&energyId=SU017&timeCategory=day',
        method: 0,
        token: this.token
      }
      API.getList(data).then(res => {
        const list = res.data
        this.dayGasList = []
        list.forEach(item => {
          this.dayGasList.push(item.value)
          this.dayGasNameList.push(item.emodelName)
        })
      })
    },
    getMonthWater(startMonth, endMonth) {
      console.log('获取水（月）')
      const data = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + startMonth + '&endDate=' + endMonth + '&emodelId=1636565362844717058,1596133880003297281,1596133639350910977,1596132955402534913,1636565586342400001&energyId=312060c20a1e02949b3ebe1721d93d92&timeCategory=month',
        method: 0,
        token: this.token
      }
      API.getList(data).then(res => {
        const list = res.data
        this.monthWaterList = []
        list.forEach(item => {
          this.monthWaterList.push(item.value)
          this.monthWaterNameList.push(item.emodelName)
        })
      })
    },
    getMonthElectric(startMonth, endMonth) {
      console.log('获取电（月）')
      const data = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + startMonth + '&endDate=' + endMonth + '&emodelId=1636564579411644417,1636565362844717058,1596133880003297281,1596133639350910977,1636565586342400001,1596132955402534913&energyId=SU035&timeCategory=month',
        method: 0,
        token: this.token
      }
      API.getList(data).then(res => {
        const list = res.data
        this.monthElectricList = []
        list.forEach(item => {
          this.monthElectricList.push(item.value)
          this.monthElectricNameList.push(item.emodelName)
        })
      })
    },
    getMonthGas(startMonth, endMonth) {
      console.log('获取天然气（月）')
      const data = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + startMonth + '&endDate=' + endMonth + '&emodelId=1636565362844717058,1596133880003297281,1596133639350910977,1637119161091047425,1643980971563892737,1596132955402534913&energyId=SU017&timeCategory=month',
        method: 0,
        token: this.token
      }
      API.getList(data).then(res => {
        const list = res.data
        this.monthGasList = []
        list.forEach(item => {
          this.monthGasList.push(item.value)
          this.monthGasNameList.push(item.emodelName)
        })
      })
    },
    getEnergyEven(year, monthDate) {
      const data1 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-01-01' + ' ' + '00:00:00' + '&endDate=' + year + '-01-31' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data2 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-02-01' + ' ' + '00:00:00' + '&endDate=' + year + '-02-28' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data3 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-03-01' + ' ' + '00:00:00' + '&endDate=' + year + '-03-31' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data4 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-04-01' + ' ' + '00:00:00' + '&endDate=' + year + '-04-30' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data5 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-05-01' + ' ' + '00:00:00' + '&endDate=' + year + '-05-31' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data6 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-06-01' + ' ' + '00:00:00' + '&endDate=' + year + '-06-30' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data7 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-07-01' + ' ' + '00:00:00' + '&endDate=' + year + '-07-31' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data8 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-08-01' + ' ' + '00:00:00' + '&endDate=' + year + '-08-31' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data9 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-09-01' + ' ' + '00:00:00' + '&endDate=' + year + '-09-30' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data10 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-10-01' + ' ' + '00:00:00' + '&endDate=' + year + '-10-31' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data11 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-11-01' + ' ' + '00:00:00' + '&endDate=' + year + '-11-30' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data12 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-12-01' + ' ' + '00:00:00' + '&endDate=' + year + '-12-31' + ' ' + '23:59:59' + '&emodelId=1596132955402534913&energyId=EN000&timeCategory=month',
        method: 0,
        token: this.token
      }
      const arr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      const valueArr = []
      this.monthArr = arr.slice(0, monthDate)
      const list = API.getList(data1)
      list.then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data2)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data3)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data4)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data5)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data6)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data7)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data8)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data9)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data10)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data11)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
        return API.getList(data12)
      }).then(res => {
        if (res.data.length > 0) {
          const value = res.data[0].value
          valueArr.push(value)
        } else {
          valueArr.push(0)
        }
      }).finally(() => {
        this.energyEvenData = valueArr
      })
    },
    async getCo2(startMonth, endMonth, year) {
      const data1 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + startMonth + '&endDate=' + endMonth + '&emodelId=1596132955402534913&energyId=SU035&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data2 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + startMonth + '&endDate=' + endMonth + '&emodelId=1596132955402534913&energyId=SU017&timeCategory=month',
        method: 0,
        token: this.token
      }
      const data3 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-01-01' + ' ' + '00:00:00' + '&endDate=' + year + '-12-31' + ' ' + '23:59:00' + '&emodelId=1596132955402534913&energyId=SU017&timeCategory=year',
        method: 0,
        token: this.token
      }
      const data4 = {
        url: 'http://10.22.97.6:8081/api/gy-service-energy-core/entEnergyData/getModelEnergyDataList?startDate=' + year + '-01-01' + ' ' + '00:00:00' + '&endDate=' + year + '-12-31' + ' ' + '23:59:00' + '&emodelId=1596132955402534913&energyId=SU035&timeCategory=year',
        method: 0,
        token: this.token
      }
      const res1 = await API.getList(data1)
      const value1 = res1.data[0].value * 0.785
      const res2 = await API.getList(data2)
      const value2 = res2.data[0].value * 0.19
      const monthValue = (value1 + value2) / 1000
      this.CO2Month = monthValue.toFixed(2)
      const res3 = await API.getList(data3)
      const value3 = res3.data[0].value * 0.19
      const res4 = await API.getList(data4)
      const value4 = res4.data[0].value * 0.785
      const yearValue = (value3 + value4) / 1000
      this.CO2Year = yearValue.toFixed(2)
      const scale = (this.CO2Year / 33879) * 100
      this.scaleCO2 = scale.toFixed(2)
    }
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  height: calc(100vh - 50px);
  background-image: url("../../assets/charts-bg.jpg");
  background-size: 100% 100%;
  background-color: #0c1330;
  background-repeat: no-repeat;
  overflow: hidden;
}
.box-title{
    font-size: 28px;
    color: #00deff;
    text-align: center;
}

.bottom-box{
  width: 98%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.box2{
  width: 24%;
  height: 26vh;
  background-image: url("../../assets/box1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box3{
  width:27.4%;
  height: 26vh;
  background-image: url("../../assets/box1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box4{
  width: 24%;
  height: 26vh;
  background-image: url("../../assets/box1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box5{
  width: 24%;
  height: 26vh;
  background-image: url("../../assets/box1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box1-title h1{
  color: #fff;
  text-align: center;
  font-size: 14px;
  margin-top: 8px;
}
.box2-title h1{
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding-top: 4px;
}
.top-title h1{
  color: #fff;
  text-align: center;
  font-size: 16px;
}
.box1-charts{
  display: flex;
  justify-content: space-evenly;
}
.title1{
  color: #00deff;
  margin-left: 8px;
  font-size: 16px;
  margin-top: 8px;
}
.top-box{
  width: 98%;
  height:28vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../assets/box1.png");
  margin: 0 auto;
  overflow: hidden;
}
.m-box{
  width: 98%;
  height: 28vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  background-image: url("../../assets/box1.png");
  overflow: hidden;
}
.charts-txt p{
  color: #fff;
  text-align: center;
  font-size: 15px;
}
.charts-txt span {
  color: #00deff;
  font-size: 15px;
}
.full{
    position: fixed;
    cursor:pointer;
    color: #00deff;
    font-size: 14px;
    border: 1px solid #00deff;
    padding: 3px 10px;
    margin-left: 1vw;
    margin-top: -30px;
    width: 50px;
  }
</style>
<style>
  .handle-button{
    display: block;
  }
</style>
